/*
 * @Author: hongbin
 * @Date: 2022-11-20 15:19:48
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-20 15:25:39
 * @Description:提示新消息
 */
import { FC } from "react";
import styled from "styled-components";
import { fadeIn, flexCenter } from "../../../styled";

interface IProps {
    newsCount: number;
}

const Peg: FC<IProps> = ({ newsCount }) => {
    if (!newsCount) return null;
    return <Container>{newsCount}</Container>;
};

export default Peg;

const Container = styled.div`
    position: absolute;
    top: -0.5vmax;
    right: -0.5vmax;
    background: #5209c7;
    width: 2vmax;
    min-width: 2vmax;
    height: 2vmax;
    border-radius: 2vmax;
    font-size: 2vmax;
    ${flexCenter};
    color: #fff;
    animation: ${fadeIn} 0.3s linear;
`;
